<template>
	<view>
		<view class="u-p-8">
		<el-input
		  placeholder="输入要查找的节点名"
		  v-model="filterText"
		  suffix-icon="el-icon-search"
		  size="mini"
		  clearable>
		</el-input>
			
		</view>
		<el-tree :data="treeData" :props="defaultProps" show-checkbox highlight-current check-strictly ref="tree" :default-checked-keys="checkedData"
			@check-change="handleCheckChange" @node-click="handleNodeClick" node-key="uuid" auto-expand-parent :filter-node-method="filterNode">
			<span class="custom-tree-node" slot-scope="{ node, data }">
				<span class="el-left-printer">{{ data.name }}</span>
				<span>
					<el-tooltip content="cc.BlockInputEvents" placement="top" effect="light">
						<i class="el-icon-thumb u-m-r-5" v-if="data.isBlockInput"></i>
					</el-tooltip>
					<i class="el-icon-monitor" @click.stop="handleNodeClickLog(data.uuid)"></i>
				</span>
			  </span>
			
		</el-tree>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		props: [
		  'treeData'
		],
		computed:{
			...mapState({
				checkedData: state => state.app.checkedData,
			})
		},
		watch: {
		  filterText(val) {
			this.$refs.tree.filter(val);
		  }
		},
		data() {
			return {
				filterText: '',
				defaultProps: {
					children: 'children',
					label: 'name'
				}
			};
		},
		methods: {
		  filterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		  },
			setCurrentKey(uuid){
				this.$refs['tree'].setCurrentKey(uuid);
			},
			handleCheckChange(data, checked, indeterminate) {
				if(process.env.NODE_ENV === 'development') return;
				let isShow = checked ? 1 : 0;
				let uuid = data.uuid;
				if (uuid !== undefined) {
					let code = "window.pluginSetNodeActive('" + uuid + "', " + isShow +");";
					this._evalCode(code);
					this._freshNode(uuid);
				}
			},
			handleNodeClickLog(uuid){
				let code = "window.logNodeInfo('" + uuid + "')";
				this._evalCode(code);
				this.$notify({
						title:'',
					  message: '节点已输出到控制台！',
					  duration:800,
					  type: 'success'
					});
						
			},
			handleNodeClick(data) {
				if(process.env.NODE_ENV === 'development') return;
				let uuid = data.uuid;
				if (uuid !== undefined) {
				  let code = "window.getNodeInfo('" + uuid + "')";
				  chrome.devtools.inspectedWindow.eval(code);
				}
			}
		}
	};
</script>

<style>
	  .custom-tree-node {
	    flex: 1;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    font-size: 14px;
	    padding-right: 8px;
	  }
	  .el-left-printer{
		  margin-left: 3px;
	  }

</style>